<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>UpMe - 数字永生与意识上传</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/responsive.css">
    <link rel="stylesheet" href="components/auth/auth.css">
    <!-- 引入字体图标 -->
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet">
    <!-- 引入 ECharts -->
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.2.2/echarts.min.js"></script>
    <!-- 引入自定义脚本 -->
    <script src="js/app.js" defer></script>
    <script src="js/brain.js" defer></script>
    <script src="js/square.js" defer></script>
    <script src="js/life.js" defer></script>
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar">
        <div class="nav-brand">UpMe</div>
        <div class="nav-menu">
            <a href="#home" class="nav-item active">首页</a>
            <a href="#life" class="nav-item">数字生命</a>
            <a href="#square" class="nav-item">生命广场</a>
            <a href="#profile" class="nav-item">个人中心</a>
        </div>
        <div class="nav-auth">
            <button class="auth-btn login" onclick="window.app.openAuth('login')">登录</button>
            <button class="auth-btn register" onclick="window.app.openAuth('register')">注册</button>
        </div>
    </nav>

    <!-- 主要内容区域 -->
    <main>
        <!-- 首页部分 -->
        <section id="home" class="section active">
            <div class="hero">
                <h1>欢迎来到云己</h1>
                <p>创建云端的自己，开启数字永生之旅</p>
                <button class="cta-button" onclick="window.app.openAuth('register')">开始体验</button>
            </div>
            <div class="features">
                <div class="feature-card">
                    <i class="fas fa-brain"></i>
                    <h3>意识上传</h3>
                    <p>将您的思维模式和个性特征数字化</p>
                </div>
                <div class="feature-card">
                    <i class="fas fa-comments"></i>
                    <h3>智能对话</h3>
                    <p>与数字化的自己进行深度交流</p>
                </div>
                <div class="feature-card">
                    <i class="fas fa-database"></i>
                    <h3>数据永存</h3>
                    <p>安全存储您的生命数据</p>
                </div>
            </div>
        </section>

        <!-- 数字生命部分 -->
        <section id="life" class="section">
            <div class="digital-life">
                <div class="life-header">
                    <h2>数字生命</h2>
                    <p>通过梦蝶心智模型,将您的意识数字化</p>
                </div>
                
                <div class="upload-sections">
                    <!-- 文本数据上传 -->
                    <div class="upload-section">
                        <h3><i class="fas fa-book"></i> 思想与记忆</h3>
                        <div class="upload-content">
                            <textarea placeholder="记录您的想法、观念和重要记忆..."></textarea>
                            <button class="upload-btn">
                                <i class="fas fa-upload"></i>上传文本
                            </button>
                        </div>
                    </div>

                    <!-- 音频数据上传 -->
                    <div class="upload-section">
                        <h3><i class="fas fa-microphone"></i> 声音特征</h3>
                        <div class="upload-content">
                            <div class="voice-recorder">
                                <button class="record-btn">
                                    <i class="fas fa-microphone"></i>
                                </button>
                                <span class="record-status">点击开始录音</span>
                            </div>
                            <div class="voice-list"></div>
                        </div>
                    </div>

                    <!-- 视频/图像数据上传 -->
                    <div class="upload-section">
                        <h3><i class="fas fa-camera"></i> 外观特征</h3>
                        <div class="upload-content">
                            <div class="image-upload">
                                <input type="file" id="imageUpload" accept="image/*" multiple hidden>
                                <button class="upload-btn" onclick="document.getElementById('imageUpload').click()">
                                    <i class="fas fa-plus"></i>添加照片
                                </button>
                            </div>
                            <div class="image-preview"></div>
                        </div>
                    </div>
                </div>

                <!-- 上传进度 -->
                <div class="upload-progress-container" style="display: none;">
                    <div class="progress-header">
                        <h3>正在生成数字生命...</h3>
                        <p class="progress-status">处理中...</p>
                    </div>
                    <div class="progress-bar">
                        <div class="progress-inner"></div>
                    </div>
                </div>

                <!-- 意识体生成按钮 -->
                <div class="generate-container" style="display: none;">
                    <button class="generate-btn">
                        <i class="fas fa-download"></i>
                        生成我的意识体
                    </button>
                    <p class="generate-tip">点击生成并下载您的意识体标准格式文件</p>
                </div>

                <!-- 数字生命对话界面 -->
                <div class="chat-container" style="display: none;">
                    <div class="chat-messages"></div>
                    <div class="chat-input">
                        <input type="text" placeholder="与您的数字生命对话...">
                        <button><i class="fas fa-paper-plane"></i></button>
                    </div>
                </div>
            </div>
        </section>

        <!-- 生命广场部分 -->
        <section id="square" class="section">
            <div class="square-container">
                <div class="square-header">
                    <h2>生命广场</h2>
                    <p>探索和收藏独特的数字意识体</p>
                </div>
                <div class="life-list">
                    <!-- 生命列表将由JS动态生成 -->
                </div>
                <div class="loading-more" style="display: none;">
                    <div class="spinner"></div>
                    <span>加载中...</span>
                </div>
            </div>
        </section>

        <!-- 个人中心部分 -->
        <section id="profile" class="section">
            <div class="profile-container">
                <div class="profile-header">
                    <div class="avatar">
                        <img src="images/default-avatar.png" alt="用户头像">
                    </div>
                    <div class="profile-info">
                        <h2>用户名</h2>
                        <p>加入时间：2024-01-03</p>
                    </div>
                </div>
                <div class="profile-menu">
                    <div class="menu-item" onclick="window.app.navigateTo('cloud-brain')">
                        <i class="fas fa-brain"></i>
                        <span>我的云脑</span>
                        <i class="fas fa-chevron-right"></i>
                    </div>
                    <div class="menu-item">
                        <i class="fas fa-cog"></i>
                        <span>设置</span>
                        <i class="fas fa-chevron-right"></i>
                    </div>
                </div>
            </div>
        </section>
    </main>

    <!-- 底部导航栏（移动端） -->
    <nav class="bottom-nav">
        <a href="#home" class="nav-item active">
            <i class="fas fa-home"></i>
            <span>首页</span>
        </a>
        <a href="#life" class="nav-item">
            <i class="fas fa-user-circle"></i>
            <span>数字生命</span>
        </a>
        <a href="#square" class="nav-item">
            <i class="fas fa-brain"></i>
            <span>生命广场</span>
        </a>
        <a href="#profile" class="nav-item">
            <i class="fas fa-user"></i>
            <span>我的</span>
        </a>
    </nav>

    <!-- 登录注册模态框 -->
    <div class="auth-modal" id="authModal">
        <div class="auth-container">
            <div class="auth-header">
                <div class="auth-tabs">
                    <button class="auth-tab active" data-tab="login">登录</button>
                    <button class="auth-tab" data-tab="register">注册</button>
                </div>
                <button class="close-btn">&times;</button>
            </div>
            
            <!-- 登录表单 -->
            <form id="loginForm" class="auth-form active">
                <div class="form-group">
                    <label for="loginEmail">邮箱</label>
                    <input type="email" id="loginEmail" required placeholder="请输入邮箱">
                </div>
                <div class="form-group">
                    <label for="loginPassword">密码</label>
                    <input type="password" id="loginPassword" required placeholder="请输入密码">
                </div>
                <div class="form-options">
                    <label>
                        <input type="checkbox" id="rememberMe"> 记住我
                    </label>
                    <a href="#" class="forgot-password">忘记密码？</a>
                </div>
                <button type="submit" class="auth-button">登录</button>
                <div class="social-login">
                    <p>其他登录方式</p>
                    <div class="social-icons">
                        <button type="button" class="social-icon wechat">
                            <i class="fab fa-weixin"></i>
                        </button>
                        <button type="button" class="social-icon qq">
                            <i class="fab fa-qq"></i>
                        </button>
                    </div>
                </div>
            </form>

            <!-- 注册表单 -->
            <form id="registerForm" class="auth-form">
                <div class="form-group">
                    <label for="registerEmail">邮箱</label>
                    <input type="email" id="registerEmail" required placeholder="请输入邮箱">
                </div>
                <div class="form-group">
                    <label for="registerUsername">用户名</label>
                    <input type="text" id="registerUsername" required placeholder="请输入用户名">
                </div>
                <div class="form-group">
                    <label for="registerPassword">密码</label>
                    <input type="password" id="registerPassword" required placeholder="请输入密码">
                </div>
                <div class="form-group">
                    <label for="confirmPassword">确认密码</label>
                    <input type="password" id="confirmPassword" required placeholder="请再次输入密码">
                </div>
                <div class="form-options">
                    <label>
                        <input type="checkbox" id="agreeTerms" required>
                        我同意<a href="#" class="terms-link">服务条款</a>和<a href="#" class="privacy-link">隐私政策</a>
                    </label>
                </div>
                <button type="submit" class="auth-button">注册</button>
            </form>
        </div>
    </div>

    <!-- JavaScript 文件 -->
    <script src="js/app.js"></script>
    <script src="js/main.js"></script>
    <script src="js/chat.js"></script>
    <script src="js/brain.js"></script>
    <script src="js/profile.js"></script>
</body>
</html> 